<html>

<head>
    <meta charset="utf-8">
    <title>helloworld</title>
</head>

<body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>
    <!--React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
            我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
            它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。

            在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
            React 的 JSX 使用大、小写的约定来区分本地组件的类和HTML标签。
            组件类只能包含一个顶层标签，否则也会报错
            -->
    <script type="text/jsx">
		var MessageBox = React.createClass({
			alertMe: function(){
                alert('你刚才点了我一下。。。。');
            },
			render:function(){
				return ( <h1 onClick={this.alertMe}>helloworld</h1> )
			}
		});

        /*注释需要写在花括号中*/
		const element = <h1>Hello, world! {/*注释...*/} </h1>;
        
		React.render(

		    <MessageBox/>,
			document.getElementById('app'),
			function(){
				console.log('渲染完成啦！！');
			}
		);



	</script>


</body>

</html>